<html>
<head>
	<title>Gruppler's Effect Demos</title>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="parseOnLoad:true, isDebug:false"></script>
		
	<script type="text/javascript">
		dojo.require("dojox.fx.split");

		var intro1, intro2;

		var blockfade_1, blockfade_2;
		var disintegrate_1, disintegrate_2
		var explode_1, explode_2;
		var shear_1, shear_2;
		var pinwheel_1, pinwheel_2;
		var currentAnimation;

		var originalText;

		var init = function(){
			
			// Intro //
			dojo.style("header1", { "opacity":0, "visibility":"visible" });
			intro1 = dojox.fx.build({
				node: "header1",
				duration: 2000,
				rows: 8,
				columns: 1,
				interval: 125
			});

			intro1.play();
		}

		// Split Effects //

		blockfade_1 = function(node){
			if(parseFloat(node.style.opacity) < 1){
				return false;
			}
			var properties = {
				node: node,
				rows: 1,
				columns: 10
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.blockFadeIn(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.blockFadeOut(properties);
			currentAnimation.play();

			/*
			// This is how we /should/ be able to do it...
			dojo.fx.chain([
				dojox.fx.blockFadeOut(properties),
				dojox.fx.blockFadeIn(properties)
			]).play();
			*/
		};
		blockfade_2 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				random: 0.25,
				reverseOrder: true
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.blockFadeIn(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.blockFadeOut(properties);
			currentAnimation.play();
		};

		disintegrate_1 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				distance: 1,
				crop: true,
				fade: false
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.build(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.disintegrate(properties);
			currentAnimation.play();
		};
		disintegrate_2 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				random: 0.5,
				distance: 2.5
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.build(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.disintegrate(properties);
			currentAnimation.play();
		};

		explode_1 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				rows: 2,
				columns: 2,
				distance: 0.75,
				easing: dojo.fx.easing.elasticOut,
				fade: false,
				crop: true
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.converge(dojo.mixin(properties,
				{
					onEnd: undefined,
					easing: dojo.fx.easing.bounceOut
				}));
				currentAnimation.play()
			};
			currentAnimation = dojox.fx.explode(properties);
			currentAnimation.play();
		};
		explode_2 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				rows: 5,
				columns: 5,
				distance: 1.5,
				duration: 1500,
				random: 0.75
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.converge(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.explode(properties);
			currentAnimation.play();
		};

		shear_1 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				interval: 50,
				distance: 0.95,
				rows: 10,
				columns: 1,
				fade: false,
				crop: true,
				reverseOrder: true
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.unShear(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.shear(properties);
			currentAnimation.play();
		};
		shear_2 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				random: 1
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.unShear(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.shear(properties);
			currentAnimation.play();
		};

		pinwheel_1 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				fade: false
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.unPinwheel(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.pinwheel(properties);
			currentAnimation.play();
		};
		
		pinwheel_2 = function(node){
			if(parseFloat(dojo.style(node,"opacity")) < 1){
				return false;
			}
			var properties = {
				node: node,
				random: 1,
				rows: 5,
				columns: 5
			};
			properties.onEnd = function(){
				currentAnimation = dojox.fx.unPinwheel(dojo.mixin(properties, {onEnd: undefined}));
				currentAnimation.play();
			};
			currentAnimation = dojox.fx.pinwheel(properties);
			currentAnimation.play();
		};

		dojo.addOnLoad(init);
	</script>

	<style type="text/css">
		body {
			font-family: verdana, arial;
			margin: 3em;
		}

		h1 {
			margin: 0;
	  	}

		hr {
			clear: both;
			border: 0px solid #999;
			border-top-width: 1px;
			margin: 0;
		}

	  hr.thick {
		border-top-width: 5px;
	  }

	  .box, .boxContainer {
		height: 100px;
		width: 100px;
		overflow: visible;
	  }

	  .box {
		color: #292929;
		border: 1px solid #999;
		background-color: #ddd;
		cursor: pointer;
		overflow: hidden;
		margin: 0;
		padding: 0;
	  }


	  .textBox p {
		width: 100px;
		height: 100px;
	  }

	  .box p, .box code {
		margin: 0;
		text-align: left;
	  }

	  .effectList {
		list-style: none;
		padding: 0;
		font-size: 10px;
		margin: 0;
	  }

	  .effectList li {
		float: left;
		padding: 1em;
	  }

	  .vl, .vr {
		border: 0px dotted #999;
	  }

	  .vl {
		border-left-width: 4px;
	  }

	  .vr {
		border-right-width: 4px;
	  }
	</style>
</head>
<body>

	<h1 id="header1">dojox.fx.split</h1>
	<p>
		Each effect is highly configurable.	 Here is a general list of the options available in each effect:
		<ul>
			<li>The number of rows and columns in which to split the element</li>
			<li>The distance the pieces travel (as a multiple of the element's respective dimensions)</li>
			<li>Whether or not to fade the pieces in/out</li>
			<li>How much the effect should be randomized (a percentage)</li>
			<li>Whether or not the pieces should appear outside the element's boundries</li>
		</ul>
	</p>
	<p style="font-weight: bold">
		Just click each box to play its animation!
	</p>
	<hr />
	<ul class="effectList">
	  <li>BlockFadeOut,<br />BlockFadeIn uniformly
		<div id='box_blockfade_1' class="box" onclick="blockfade_1(this)">
		  <code>
			rows: 1<br />
			columns: 10
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">BlockFadeOut,<br />BlockFadeIn randomly
		<div id='box_blockfade_2' class="box" onclick="blockfade_2(this)">
		  <code>
			random: 0.25<br />
			reverseOrder: true
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Disintegrate, Build<br />uniformly (cropped)
		<div id='box_disintegrate_1' class="box" onclick="disintegrate_1(this)">
		  <code>
			distance: 1<br />
			crop: true<br />
			fade: false
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">Disintegrate, Build<br />randomly
		<div id='box_disintegrate_2' class="box" onclick="disintegrate_2(this)">
		  <code>
			random: 0.5<br />
			distance: 2.5
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Explode, Converge<br />uniformly (cropped)
		<div id='box_explode_1' class="box" onclick="explode_1(this)">
		  <code>
			rows: 2<br />
			columns: 2<br />
			distance: 0.75<br />
			fade: false<br />
			crop: true<br />
			(custom easing)
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">Explode, Converge<br />randomly
		<div id='box_explode_2' class="box" onclick="explode_2(this)">
		  <code>
			rows: 5<br />
			columns: 5<br />
			distance: 1.5<br />
			duration: 1500<br />
			random: 0.75
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Shear, UnShear<br />rows (cropped)
		<div id='box_shear_1' class="box" onclick="shear_1(this)">
		  <code>
			interval: 50<br />
			distance: 0.95<br />
			rows: 10<br />
			columns: 1<br />
			fade: false<br />
			crop: true<br />
			reverseOrder: true
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li class="vr">Shear, UnShear<br />rows and columns
		<div id='box_shear_2' class="box" onclick="shear_2(this)">
		  <code>
			random: 1
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
	  <li>Pinwheel, UnPinwheel<br />uniformly
		<div id='box_pinwheel_1' class="box" onclick="pinwheel_1(this)">
		  <code>
			fade: false
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
	  </li>
		<li>Pinwheel, UnPinwheel<br />randomly
		<div id='box_pinwheel_2' class="box" onclick="pinwheel_2(this)">
		  <code>
			random: 1<br />
			rows: 5<br />
			columns: 5
		  </code><hr />
		  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi nibh. Maecenas metus nisi, tempus sed.</p>
		</div>
		</li>
	</ul>
	<div style="height:400px"></div>
</body>
</html>
